<template>
  <CommondCard title="今日用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div>
        退货率 &nbsp;<span class="emphasis"
          >{{ numberFormat(returnRate) }}%</span
        >
      </div>
    </template>
  </CommondCard>
</template>

<script lang="ts">
export default {
  name: 'TodayOrders',
};
</script>
<script lang="ts" setup>
import CommondCard from './CommonCard.vue';
import { computed, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData';
import useFormat from '@/hooks/useFormat';
const { numberFormat, moneyFormat } = useFormat();
const reportDataStore = useReportDataStore();

// 1. 今日用户数
const orderUser = computed(() => reportDataStore.reportData.orderUser);

// 2. 退货率
const returnRate = computed(() => reportDataStore.reportData.returnRate);

// 3. Y轴数据
const orderUserTrend = computed(
  () => reportDataStore.reportData.orderUserTrend || []
);

// 4. X轴数据
const orderUserTrendAxis = computed(
  () => reportDataStore.reportData.orderUserTrendAxis || []
);

// 获取页面中的标签对象
const barChartRef = ref();
let barChart: EChartsType;

const getOption = () => {
  //12346484656
  return {
    xAxis: {
      /* data: [
        '一月',
        '二月',
        '三月',
        '四月',
        '五月',
        '六月',
        '七月',
        '八月',
        '九月',
        '10月',
        '11月',
        '12月',
      ], */
      data: orderUserTrendAxis.value,
    },
    yAxis: {
      // Y轴刻度不显示
      show: false,
    },
    series: {
      type: 'bar',
      /* data: [40, 70, 30, 22, 65, 23, 77, 88, 96, 99, 62, 97] */
      data: orderUserTrend.value,
    },
    grid: {
      left: 0,
      right: 0,
    },
    tooltip: {
      // x轴时触发
      trigger: 'axis',
      // 限定显示在图表之内
      confine: true,
    },
  };
};

// 1. 页面挂载完成之后 做一些处理
onMounted(() => {
  // 1. 初始化
  barChart = echarts.init(barChartRef.value);

  // 2. 根据参数来生成对应的图表
  barChart.setOption(getOption());

  // 3. 实现响应式效果
  window.addEventListener('resize', () => {
    barChart.resize()
  })
});

// 2. 添加监视 当有数据了之后要重新渲染一次
watch(orderUser, () => {
  barChart.setOption(getOption());
});
</script>

<style></style>
